import bus from '@/eventBus'
import { debunce } from "@/utils"
import defaultGif from "@/assets/default.gif"

let imgs = [] // 记录所有图片


function scrollhandle(dom) {
    setImgs()
}

bus.$on("mainScroll", debunce(scrollhandle, 30))

// 设置显示的图片
function setImgs() {

    for (const obj of imgs) {
        setImg(obj)
    }
}

// 判断图片是否在视口范围
function setImg(obj) {
    if (!obj.dom.src) {
        obj.dom.src = defaultGif
    }

    // 处理图片
    const rect = obj.dom.getBoundingClientRect();
    const clientHeight = document.documentElement.clientHeight // 视口高度
    const height = rect.height || 150
    // 判断图片是否在视口范围
    if (rect.top < -height || rect.top > clientHeight) { // 不在视口内部
        return
    }
    const temp = new Image()
    temp.onload = function (params) {
        obj.dom.src = obj.src
    }
    temp.src = obj.src
}

// function (el, binding) {

// }


// 懒加载指令
export default {
    inserted(el, binding) {
        const obj = { dom: el, src: binding.value }
        imgs.push(obj)
        setImg(obj); // 一加载就立即处理
    },
    unbind(el) { // 解除组件绑定  移除离开页面的img dom
        imgs = imgs.filter(item => item.el !== el)
    }
}